<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('my.smrz')" :leftIcon="true"></navbar>
		<view class="content">
			<view class="top-box">
				<view class="success-box" v-if="reviewStatus == '2' ">
					<image class="success-img" src="/static/icon/real-success.svg" mode=""></image>
					<view class="status success">{{t('realName.ysm')}}</view>
				</view>
				<view class="review-box" v-if="reviewStatus == '1' ">
					<image class="review-img" src="/static/icon/real-review.svg" mode=""></image>
					<view class="status review">{{t('realName.dsh')}}</view>
				</view>
				<view class="faill-box" v-if="reviewStatus == '0' ">
					<image class="faill-img" src="/static/icon/real-fail.svg" mode=""></image>
					<view class="status faill">{{t('realName.rzsb')}}</view>
				</view>
			</view>
			<view class="form-container">
				<!-- 证件类型 -->
				<view class="form-item">
					<view class="form-label">{{ t('realName.zjlx') }}</view>
					<view class="form-input-container" @click="showIdTypeSelector = true">
						<view class="form-input">
							<image src="/static/icon/zhenjian.svg" class="input-icon"></image>
							<text>{{ cardTypeList[selectedIdType] }}</text>
						</view>
					</view>
				</view>

				<!-- 真实姓名 -->
				<view class="form-item">
					<view class="form-label">{{ t('realName.zsxm') }}</view>
					<view class="form-input-container">
						<view class="form-input">
							<image src="/static/icon/xingming.svg" class="input-icon"></image>
							<view class="input-value">
								王**
							</view>
						</view>
					</view>
				</view>

				<!-- 证件号码 -->
				<view class="form-item">
					<view class="form-label">{{ t('realName.zjhm') }}</view>
					<view class="form-input-container">
						<view class="form-input">
							<image src="/static/icon/haoma.svg" class="input-icon"></image>
							<view class="input-value">
								18624******1482054
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useI18n
	} from 'vue-i18n';
	import {
		ref
	} from 'vue';
	const {
		t,
		locale
	} = useI18n();
	const reviewStatus = ref(2)
	// 表单数据
	const selectedIdType = ref(0); // 默认选择身份证
	const realName = ref('');
	const idNumber = ref('');
	const frontImage = ref('');
	const backImage = ref('');
	const showIdTypeSelector = ref(false);
	const cardTypeList = ref([ t('realName.sfz'), t('realName.hz'), t('realName.jsz')])
	// 选择证件类型
	function selectIdType(type) {
		selectedIdType.value = type;
		showIdTypeSelector.value = false;
	}
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	.content {
		margin: 27.91rpx 34.89rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1.74rpx 1.74rpx 5.23rpx rgba(102, 102, 102, 0.25);
		padding-top: 52.33rpx;
	}

	.top-box {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;

		.status {
			text-align: center;
			font-size: 27.91rpx;
			color: rgba(255, 255, 255, 1);
			width: 139.54rpx;
			height: 48.84rpx;
			line-height: 48.84rpx;
			border-radius: 10.47rpx;
			margin-top: 27.91rpx;
		}

		.success {
			background: rgba(67, 207, 124, 1);
		}

		.faill {
			background: rgba(212, 48, 48, 1);
		}

		.review {
			background: rgba(230, 93, 62, 1);
		}

		.success-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 285.79rpx;
				height: 285.79rpx;
			}
		}

		.faill-box {
			image {
				width: 165.71rpx;
				height: 165.71rpx;
			}
		}

		.review-box {
			image {
				width: 139.54rpx;
				height: 139.54rpx;
			}
		}

	}

	.form-container {
		border-radius: 31.4rpx;
		padding: 78.5rpx 55.82rpx 100rpx;

		.form-item {
			margin-bottom: 34.89rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.form-label {
				font-size: 27.91rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.42rpx;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 17.45rpx;
				margin-left: 10.67rpx;
			}

			.form-input-container {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 27.91rpx;
				background: rgba(249, 250, 251, 1);
				padding: 31.4rpx 52.33rpx;

				.form-input {
					display: flex;
					align-items: center;
					flex: 1;
					height: 100%;

					.input-icon {
						width: 34.89rpx;
						height: 34.89rpx;
						margin-right: 34.89rpx;
					}

					.input-value {
						font-size: 27.91rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.42rpx;
						color: rgba(51, 51, 51, 1);
					}

					text {
						font-size: 28rpx;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}
	}

	.arrow-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.id-photos {
		display: flex;
		justify-content: space-between;
	}

	.photo-upload {
		width: 275.6rpx;
		height: 195.36rpx;
		border-radius: 26.16rpx;
		border: 1.74rpx dashed rgba(196, 196, 196, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.upload-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.plus {
		font-size: 27.91rpx;
		color: rgba(196, 196, 196, 1);
		;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
	}

	.confirm-btn {
		width: 570.38rpx;
		height: 97.68rpx;
		line-height: 97.68rpx;
		border-radius: 26.16rpx;
		background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
		text-align: center;
		color: #FFFFFF;
		font-size: 31.4rpx;
		font-weight: 700;
		margin-top: 338.4rpx;
	}
</style>